<template>
    <div>
        <a v-if="display">
            <button v-if="isSubscribedTo" @click="toggleSubscription" class="btn btn-outline-secondary btn-sm mr-2"><i class="fa fa-eye-slash"></i> 取消关注</button>
            <button v-else @click="toggleSubscription" class="btn btn-primary btn-sm mr-2"><i class="fa fa-eye"></i> 关注问题</button>
        </a>

        <a class="text-secondary">
            <i class="fa fa-folder"></i>
            <span v-text="this.question.category.name"></span>
        </a>

        <a class="text-secondary">
            <i class="fa fa-eye"></i>
            <span v-text="subscriptionsCount"></span> 人关注
        </a>

        <span> • </span>

        <a class="text-secondary">
            <i class="fa fa-tags"></i>
            <span v-text="answersCount"></span> 个回答
        </a>
        <span> • </span>

        <a class="text-secondary" role="button" href="#" data-toggle="modal" :data-target="'#' + modalQuestionId">
            <i class="fa fa-comments"></i>
            <span v-text="commentsCount"></span> 个评论
        </a>

        <div class="modal fade" :id="modalQuestionId" tabindex="-1" role="dialog" :aria-labelledby="modalQuestionId" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" >
                <div class="modal-content" style="height:750px">
                    <div class="modal-header">
                        <h4 class="modal-title" :id="modalQuestionId">
                            评论列表
                        </h4>
                    </div>
                    <div class="modal-body">

                        <comments :data="this.question.comments" :subject="this.question" @addComment="commentsCount++"></comments>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <span> • </span>
        <a v-if="signedIn" class="text-secondary" >

            <button type="submit" :class="voteUpClasses" @click="toggleVoteUp" :dusk="`question-up-vote${question.id}`" style="background-color:transparent;border-style:none;">
                <span></span>
                <span v-text="upVotesCount"></span>
            </button>

            <span> • </span>

            <button type="submit" :class="voteDownClasses" @click="toggleVoteDown" :dusk="`question-down-vote${question.id}`" style="background-color:transparent;border-style:none;">
                <span></span>
                <span v-text="downVotesCount"></span>
            </button>
        </a>
    </div>

</template>

<script>
export default {
    props:['question','display'],

    data() {
        return {
            subscriptionsCount: this.question.subscriptionsCount,
            answersCount: this.question.answers_count,
            commentsCount: this.question.commentsCount,
            upVotesCount: this.question.upVotesCount,
            downVotesCount: this.question.downVotesCount,
            isVotedUp:this.question.isVotedUp,
            isVotedDown:this.question.isVotedDown,
            isSubscribedTo:this.question.isSubscribedTo
        }
    },

    computed: {
        voteUpClasses() {
            return ['fa-thumbs-up', this.isVotedUp ? 'fa' : 'far']
        },

        voteDownClasses() {
            return ['fa-thumbs-down', this.isVotedDown ? 'fa' : 'far']
        },

        subscriptionClasses() {
            return ['fa-heart', this.isSubscribedTo ? 'fa' : 'far']
        },

        voteUpEndpoint() {
            return '/questions/' + this.question.id + '/up-votes';
        },

        voteDownEndpoint() {
            return '/questions/' + this.question.id + '/down-votes';
        },

        subscriptionEndpoint() {
            return '/questions/' + this.question.id + '/subscriptions';
        },

        modalQuestionId() {
            return 'modalQuestion' + this.question.id
        },

        signedIn() {
            return window.App.signedIn;
        },
    },

    methods: {
        toggleVoteUp() {
            if (this.isVotedUp){
                axios.delete(this.voteUpEndpoint);

                this.isVotedUp = false;
                this.upVotesCount--;

                flash('已取消推荐！');
            }else {
                axios.post(this.voteUpEndpoint);

                this.isVotedUp = true;
                this.upVotesCount++;

                flash('已推荐！');
            }
        },

        toggleVoteDown() {
            if (this.isVotedDown){
                axios.delete(this.voteDownEndpoint);

                this.isVotedDown = false;
                this.downVotesCount--;

                flash('已取消举报！');
            }else {
                axios.post(this.voteDownEndpoint);

                this.isVotedDown = true;
                this.downVotesCount++;

                flash('已举报！');
            }
        },

        toggleSubscription() {
            if (this.isSubscribedTo){
                axios.delete(this.subscriptionEndpoint);

                this.isSubscribedTo = false;
                this.subscriptionsCount--;

                flash('已取消关注！');
            }else {
                axios.post(this.subscriptionEndpoint);

                this.isSubscribedTo = true;
                this.subscriptionsCount++;

                flash('已关注！');
            }
        },
    }
}
</script>
